import { add_edit_department, department_info, department_select } from '@/services/department';
import { ActionType, ProForm, ProFormGroup, ProFormText } from '@ant-design/pro-components';
import { Divider, Form, message, Modal, Spin, Switch, TreeSelect } from 'antd';
import { useEffect, useState } from 'react';
interface Iprops {
  isShowEditModal: (show: boolean) => void;
  isEditModalOpen: boolean;
  actionRef: React.MutableRefObject<ActionType | undefined>;
  id: number | undefined;
}
type T = {
  disabled: boolean;
  status: number;
  value: number;
  id: number;
  title: string;
  name: string;
  pId: number;
  parent_id: number;
};
const EditDepartment = (props: Iprops) => {
  const { isEditModalOpen, isShowEditModal, actionRef, id } = props;
  // 存储科室详情
  const [departdata, setdepartdata] = useState<any>(undefined);
  // 存储科室列表
  const [departmentlist, setdepartmentlist] = useState();

  // 页面初始化，获取科室详情信息,科室列表数据
  useEffect(() => {
    const getData = async () => {
      if (id) {
        let request_body = {
          id,
        };
        let params: any = await department_info(request_body);
        console.log('科室详情', params);
        if (params.msg == 'ok') {
          //设置科室详情
          setdepartdata(params.data);
        }
      }
    };
    get_department_select();
    getData();
  }, []);
  // 获取科室列表
  const get_department_select = async () => {
    let params = await department_select();
    params.data.map((item: T) => {
      item.disabled = item.status == 0 ? true : false;
      item.value = item.id;
      item.title = item.name;
      item.pId = item.parent_id;
    });
    setdepartmentlist(params.data);
  };
  // 编辑科室
  const edit_department = async (value: { name: string; department: number; status: number }) => {
    console.log('value', value);
    if ('status' in value) {
      var switch_status = value.status ? 1 : 0;
    } else {
      var switch_status: number = departdata.status;
    }
    let request_body = {
      id,
      name: value.name,
      status: switch_status,
      parent_id: value.department,
    };
    let res: any = await add_edit_department(request_body);
    // console.log('编辑科室', res);
    if (res.msg == 'ok') {
      actionRef.current?.reload();
      message.success('编辑科室成功');
      get_department_select();
      isShowEditModal(false);
    } else {
      message.error(res.msg);
    }
  };
  return (
    <Modal
      title="编辑科室"
      centered
      open={isEditModalOpen}
      onCancel={() => isShowEditModal(false)}
      width={350}
      destroyOnClose={true}
      footer={null}
    >
      <Divider />
      {departdata === undefined ? (
        <div
          style={{
            margin: '20px 0',
            marginBottom: '20px',
            padding: '30px 50px',
            textAlign: 'center',
          }}
        >
          <Spin size="large" />
        </div>
      ) : (
        <>
          <ProForm
            onFinish={(value: { name: string; department: number; status: number }) =>
              edit_department(value)
            }
            submitter={{
              searchConfig: {
                submitText: '提交',
                resetText: '重置',
              },
              resetButtonProps: {
                style: {
                  // 隐藏重置按钮
                  display: 'block',
                  position: 'absolute',
                  left: 'calc(50% - 107px)',
                },
              },
              submitButtonProps: {
                style: {
                  display: 'block',
                  position: 'absolute',
                  right: 'calc(50% - 107px)',
                },
              },
            }}
          >
            <ProFormGroup>
              <ProFormText
                width={280}
                name="name"
                label="科室名称"
                placeholder="请输入科室名称"
                rules={[
                  {
                    required: true,
                    message: '请输入科室名称',
                    validateTrigger: 'onBlur',
                  },
                  { pattern: /(^\S)((.)*\S)?(\S*$)/, message: '不能输入空格' },
                ]}
                initialValue={departdata.name}
              />
              <Form.Item
                name="department"
                label="上级名称"
                rules={[{ required: true, message: '请选择上级' }]}
                initialValue={departdata.parent_id}
              >
                <TreeSelect
                  treeDataSimpleMode
                  style={{ width: '280px' }}
                  treeData={departmentlist}
                  placeholder="请选择上级"
                  treeDefaultExpandAll
                />
              </Form.Item>
              <Form.Item name="status" label="状态" valuePropName="checked">
                <Switch
                  checkedChildren="启用"
                  unCheckedChildren="禁用"
                  defaultChecked={departdata.status === 1}
                />
              </Form.Item>
            </ProFormGroup>
            <div style={{ height: '24px' }}></div>
          </ProForm>
        </>
      )}
      <br />
    </Modal>
  );
};
export default EditDepartment;
